<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>百度</title>
	<style type="text/css">
		/*代码初始化*/
		*{
			margin:0;
			padding: 0;
		}
		li{
			list-style-type: none;
		}
		/*代码主体*/
		.box{
			width: 372px;
			height: 185px;
			/*border:1px solid;*/
			margin: 100px auto;
		}
		.top{
			width: 100%;
			height: 35px;
			/*background-color: red;*/
		}
		.left{
			float: left;

		}
		.left h1{
			font-size: 16px;
			line-height: 35px;
			margin-left: 7px;
		}
		.right{
			float: right;
			margin-top: 4px;
		}
		.bottom{
			width: 100%;
			height: 150px;
		}
		.bottom ul{
			width: 100%;
			height: 100%;
		}
		.bottom ul li{
			float: left;
			width: 25%;
			text-align: center;
		}
		.bottom ul li p{
			color: #aaabab;
			font-size: 12px;
			padding: 0 10px;
			box-sizing: border-box;
		}
		.bottom ul li a p{
			color: blue;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 上 -->
		<div class="top">
			<div class="left">
				<h1>百度高管</h1>
			</div>
			<div class="right">
				<a href="">展开</a>
				<img src="http://graph.baidu.com/resource/12292c5c14f4a0e3eca9001594277715.jpg">
			</div>
		</div>
		<!-- 下 -->
		<div class="bottom">
			<ul>
				<li>
					<a href="#">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						<p>李彦宏</p>
					</a>
					<p>百度创始人董事长兼CEO</p>
				</li>
				<li>
					<a href="#">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						<p>李彦宏</p>
					</a>
					<p>百度创始人董事长兼CEO</p>
				</li>
				<li>
					<a href="#">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						<p>李彦宏</p>
					</a>
					<p>百度创始人董事长兼CEO</p>
				</li>
				<li>
					<a href="#">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						<p>李彦宏</p>
					</a>
					<p>百度创始人董事长兼CEO</p>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>